<template>
  <div id="book_item"  @click="addBorrow(bookObj.id)">

    <img :src="bookObj.cover" class="book_cover">
    <div class="book_name">《{{bookObj.name}}》</div>
    <div class="book_author">作者：{{bookObj.author}}</div>
<!--    <div class="book_price">-->
<!--      ￥{{bookObj.price}}-->
<!--    </div>-->
    <div class="book_stock">库存：{{bookObj.stock}}本</div>

  </div>
</template>

<script>
// import {addBorrows} from "../../network/homeRequest";

export default {
  name: "BookItem",
  props:{
    bookObj:{
      type:Object
    }
  },
  methods:{
    addBorrow(id){
      console.log(id);
      // addBorrows(sessionStorage.getItem("wlj-user-id"),id).then((result)=>{
      //   console.log(result);
      //   if (result.data.code===200){
      //     this.$message({
      //       message: '借阅成功!',
      //       type: 'success'
      //     });
      //   }else {
      //     this.$message.error('借阅失败');
      //   }
      // }).catch((reason)=>{
      //   console.log(reason);
      // })
      this.$router.push(`/bookdetail/${id}`);


    }
  }
}
</script>

<style scoped>
#book_item{
  position: relative;
  width: 260px;
  border: 2px solid #cccccc;
  margin: 20px 10px;
  overflow: hidden;
}
#book_item div{
  padding: 0 10px;
  line-height: 30px;
}
.book_cover{
  width: 100%;
}
.book_name{
  font-size: 30px;
  width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.book_price{
  font-size: 20px;
  color: chocolate;
  font-weight: bolder;
}
.book_author{
  font-weight: bolder;
}
#book_item:hover .book_item_mask{
  transform: translateY(0);
}
#book_item .book_item_mask{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,.8);
  transition: transform 300ms;
  transform: translateY(100%);
}
.borrow_btn{
  position: absolute;
  top: 50%;
  left: 50%;
  text-align: center;
  transform: translate(-50%,-50%);
  height: 120px;
  width: 120px;
  border-radius: 50%;
  padding: 0;
  margin: 0;
  font-size: 20px;
}
</style>
